<template>
  <div class="user-card__wrap">
    <div class="user-card1">
      <yun-avatar :userId="userId1" style="margin:40px auto 0;" :src="userAvatar" size="84px"></yun-avatar>
      <div class="info1">
        <p class="name"  @click="changeRoute2('blog')">{{nickName}}</p>
        <yun-icon name="sex_man" size="12px" color="#00AAE6" v-if="gender===1"></yun-icon>
        <yun-icon name="sex_woman" size="12px" color="#F08E8E" v-if="gender===2"></yun-icon>
      </div>
      <p class="info2">{{signature}}</p>

      <nuxt-link tag="div" v-if="from==='my'" class="button" to="/personal-center/account/info">修改资料</nuxt-link>

      <div v-if="userId1!==$store.state.userProfile.userId&&from!=='my'&&followedUser" class="follow1" @click="dataPostToCancelFollow">
        <yun-icon name="loading" v-if="followLoading"></yun-icon><yun-icon v-if="!followLoading" name="right"></yun-icon>已关注
      </div>
      <div v-if="userId1!==$store.state.userProfile.userId&&from!=='my'&&!followedUser" class="follow2" @click="dataPostToFollow">
        <yun-icon name="loading" v-if="followLoading"></yun-icon><span v-if="!followLoading">+</span>关注
      </div>
      <div class="footer">
        <div class="footer-item" @click="changeRoute2('project')">
          <p>项目</p>
          <h6>{{statistics.projectNum}}</h6>
        </div>

        <div class="footer-item" @click="changeRoute2('blog')">
          <p>博客</p>
          <h6>{{statistics.blogNum}}</h6>
        </div>

        <div class="footer-item" @click="changeRoute2('answer')">
          <p>回答</p>
          <h6>{{statistics.questionReplyNum}}</h6>
        </div>

        <div class="footer-item" >
          <p>人气</p>
          <h6>{{statistics.visitedNum}}</h6>
        </div>
      </div>
    </div>
    <div class="user-card2">
      <div class="card2-item1" @click="changeRoute2('following')">
        <p>关注</p>
        <h6>{{statistics.followedNum}}</h6>
      </div>
      <div class="card2-item2" @click="changeRoute2('fans')">
        <p>粉丝</p>
        <h6>{{statistics.fansNum}}</h6>
      </div>
    </div>
  </div>
</template>


<script>

  import config from '../../action/config';
    export default {
      name:'userCard',
      data(){
        return{
          userAvatar:'',
          userId1:"",
          nickName:'',
          gender:0,
          signature:'',
          projectNum:6,
          blogNum:6,
          answerNum:6,
          popularity:6,
          follow:7,
          fans:7,
          statistics:{},
          followLoading:false,
          followedUser:false,
        }
      },
      props:{
        userId:{
          type:String,
          default:'',
        },

        from:{
          type:String,
          default:'',
        },
        info:{
          type:Object,
          default:()=>({})
        },
        nickName1:String
      },

      created(){
        if(this.nickName1){
          this.dataGet2UserInfo();
        }else {
          this.dataGetUserInfo();
        }
      },
      watch:{
        userId(){
          if(this.nickName1){
            this.dataGet2UserInfo();
          }else {
            this.dataGetUserInfo();
          }
         },
        nickName1(){
          this.dataGet2UserInfo();
        }
      },
      methods:{
        dataGetUserInfo(){
          this.followLoading=true;
          if(this.userId){
            this.$axios.$get(config.api.get.User.otherInfo+this.userId+'/baseinfo').then((response) => {
              if(response.code===0){
                let data = response.data;
                this.userId1 = this.userId;
                this.nickName=data.nickName;
                this.gender= data.gender;
                this.signature = data.signature;
                this.userAvatar = data.userAvatar;
                this.statistics = data.statistics || {};
                this.followLoading=false;
                this.followedUser = data.followedUser;
              }
            })
          }

        },
        dataGet2UserInfo(){
          let data = this.info;
          this.nickName=data.nickName;
          this.userId1 = data.userId;
          this.gender= data.gender;
          this.signature = data.signature;
          this.userAvatar = data.userAvatar;
          this.statistics = data.statistics || {};
          this.followLoading=false;
          this.followedUser = data.followedUser;
        },

        dataPostToFollow(){
          this.followLoading=true;

          this.$axios.$post(config.api.post.User.follow+this.userId1+'/follower').then((response)=>{
            if(response.code===0){
              this.$message({
                type:'success',
                message:response.msg
              })
              this.followedUser = true;

            }else{
              this.$message({
                type:'info',
                message:'请在登陆后操作'
              })
            }
            this.followLoading=false;
          })
        },

        dataPostToCancelFollow(){
          this.followLoading=true;

          this.$axios.$delete(config.api.delete.User.unfollow+this.userId1+'/follower').then((response)=>{
            if(response.code===0){
              this.$message({
                type:'success',
                message:response.msg
              })
              this.followedUser = false;

            }else{
              this.$message({
                type:'info',
                message:'请在登陆后操作'
              })
            }
            this.followLoading=false;

          })
        },

        dataPostToBlack(){
          this.$axios.$post(config.api.post.User.shielding+this.userId1).then((response)=>{
            if(response.code===0){
              this.$message({
                type:'success',
                message:response.msg
              })
            }else{
              this.$message({
                type:'warning',
                message:response.msg
              })
            }
          })
        },

        dataPostToCancelBlack(){
          this.$axios.$delete(config.api.post.User.shielding+this.userId1).then((response)=>{
            if(response.code===0){
              this.$message({
                type:'success',
                message:response.msg
              })
            }else{
              this.$message({
                type:'warning',
                message:response.msg
              })
            }
          })
        },

        changeRoute(path){
          this.$router.push(this.dataGet2Path(path));
        },
        changeRoute2(r){
          let routeUrl = this.$router.resolve({
            path: this.dataGet2Path(r)
          });
          window.open(routeUrl.href,'_blank')
        },

        dataGet2Path(path){
          if(!this.userId1){
            return ''
          }else if(this.userId1===this.$store.state.userProfile.userId){
            if(path==='following'||path==='fans'){
              return  '/personal-center/person/'+path;
            }else{
              return  '/personal-center/home/'+path;

            }
          }else{
            return '/u/'+this.userId1+'/'+path
          }
        }
      },
    }
</script>


<style lang="scss" scoped>
  .user-card__wrap{
    width:302*$length;
    .user-card1{
      overflow: hidden;
      border-radius: 4*$length;
      width:302*$length;
      background-color: #fff;
      @extend %flex-column-center;
      .info1{
        @extend %flex-row-center;
        margin-top: 20*$length;
        .name{
          @extend %cursorPointer;
          @include fontStyle(14,19,500,#000,center);
          margin-right:8*$length;
        }
      }
      .info2{
        width:270*$length;
        margin:17*$length auto 0;
        @include fontStyle(12,16,500,#000,center);
        height:auto;
        white-space: normal;
        word-break: break-word;
      }
      .button{
        margin:21*$length auto 0;
        padding:7*$length 22*$length;
        background-color: #fff;
        border:1px solid #EFEFEF;
        border-radius: 4*$length;
        @include fontStyle(14,19,500,#999999,center);
        @extend %animate-transition;
        @extend %cursorPointer;
        &:hover{
          color: #fff;
          background-color: #00AAE6;
          border:1px solid transparent;
        }


      }
      .follow1{
        margin:21*$length auto 0;
        padding:7*$length 22*$length;
        background-color: #fff;
        border:1px solid #EFEFEF;
        border-radius: 4*$length;
        @include fontStyle(14,19,500,#999999,center);
        @extend %animate-transition;
        @extend %cursorPointer;
        &:hover{
          color: #13ce66;
          background-color: #e7faf0;
          border:1px solid #d0f5e0;
        }


      }
      .follow2{
        margin:21*$length auto 0;
        padding:7*$length 22*$length;
        background-color: #e7faf0;
        border:1px solid #d0f5e0;
        border-radius: 4*$length;
        @include fontStyle(14,19,500,#13ce66,center);
        @extend %animate-transition;
        @extend %cursorPointer;
        &:hover{
          background-color: #13ce66;
          border:1px solid #d0f5e0;
          color:#e7faf0
        }


      }
      .footer{
        width:232*$length;
        height:47*$length;
        margin:46*$length auto 0;
        @extend %flex-row-spb;
        padding-bottom:22*$length;
        .footer-item{
          width:50%;
          height:47*$length;
          @extend %flex-column-spb;
          @extend %cursorPointer;
          &:hover{
            & p{
              color:#00AAE6
            }
            & h6{
              color:#00AAE6
            }
          }
          p{
              @include fontStyle(12,16,500,#999,center);
            @extend %animate-transition;

          }
          h6{
            @include fontStyle(18,24,500,#333,center);
            @extend %animate-transition;

          }
        }
      }

    }
    .user-card2{
      width:302*$length;
      padding:22*$length 0;
      margin:0 auto;
      background-color: #fff;
      margin-top:16*$length;
      border-radius: 4*$length;
      @extend %flex-row-spb;
      .card2-item1{
        height:47*$length;
        width: 50%;
        @extend %flex-column-spb;
        @extend %cursorPointer;
        &:hover{
          & p{
            color:#00AAE6
          }
          & h6{
            color:#00AAE6
          }
        }
        p{
          @include fontStyle(12,16,500,#999,center);
          @extend %animate-transition;

        }
        h6{
          @include fontStyle(18,24,500,#333,center);
          @extend %animate-transition;

        }
      }
      .card2-item2{
        height:47*$length;
        width: 50%;
        @extend %flex-column-spb;
        @extend %cursorPointer;
        border-left:1px dashed #EFEFEF;
        &:hover{
          & p{
            color:#00AAE6
          }
          & h6{
            color:#00AAE6
          }
        }
        p{
          @include fontStyle(12,16,500,#999,center);
          @extend %animate-transition;

        }
        h6{
          @include fontStyle(18,24,500,#333,center);
          @extend %animate-transition;

        }
      }
    }


  }
</style>
